<template>
  <div class="detail">
    <div v-for="(v, i) in uparr" :key="i">
      <div class="head">
        <img
          src="https://pages.c-ctrip.com/you/livestream/tripshoot_forward%20_black@3x.png?v=20191211_13_07"
          alt=""  @click="fun()"
        />
        <span>携程笔记</span>
      </div>
      <div class="user">
        <div class="user-img">
          <img :src="v.article.author.coverImage.originalUrl" alt="" />
        </div>
        <div class="user-text">
          <h5>xx</h5>
          <p>33人关注了TA</p>
        </div>
        <div class="user-btn">+关注</div>
      </div>
      <div class="swiper" >
        <van-swipe class="my-swipe" indicator-color="white" >
          <van-swipe-item v-for="(s, i) in v.article.images" :key="i">
            <img :src="s.originalUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="poitag">
        <div class="item">
          <img
            src="https://pages.c-ctrip.com/livestream/tripshoot/wx_detail_location.png"
            alt=""
          />
          <span>{{v.article.poiName}} ></span>
        </div>
        <div class="item2">
          <img
            src="https://pages.c-ctrip.com/livestream/tripshoot/wx_detail_location.png"
            alt=""
          />
          <span>西海大峡谷 ></span>
        </div>
      </div>
      <div class="container">
        <img src="	https://youimg1.c-ctrip.com/target/10051f000001gssjsC9BD_R_240_200_Q90.jpg" alt="" />
        <div class="container-wrap">
          <h5>西海大峡谷</h5>
          <p>探秘奇石嶙峋的奇幻峡谷</p>
          <p class="title">
            <span style="color: rgb(0, 153, 247)">4.7分</span> 2112条评论
          </p>
          <button>去看看</button>
        </div>
      </div>
      <div class="content">
        <h2>{{v.article.articleTitle}}</h2>
        <p>{{v.article.content |updata}}</p>
        <p>{{v.article.contentWithoutCtag |updata}}</p>
        <p class="title">{{v.article.shootTimeDisplay|upsj}}发布 拍摄与{{v.article.shootTimeDisplay}}</p>
      </div>
      <div class="comment">
        评论
        <br />
        <div class="comment-list">
          <img
            src="	https://dimg04.c-ctrip.com/images/100m11000000rpg7xBCAD_C_180_180.jpg"
            alt=""
          />
          <div class="item-warp">
            <span>gz20</span>
            <p>塔川景色如此之美，可惜擦肩而过了..</p>
            <span>4天前</span>
          </div>
        </div>
        <div class="comment-list">
          <img
            src="	https://dimg04.c-ctrip.com/images/Z80o0v000000jlmkt5649_C_180_180.jpg"
            alt=""
          />
          <div class="item-warp">
            <span>红泥</span>
            <p>这秋色太明艳了 正棒 ..</p>
            <span>13天前</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  data() {
    return {
      id: 0,
      arr: [],
    };
  },
  computed: {
    uparr() {
      return this.arr.filter((v) => {
        if (v.article.articleId == this.id) {
          return v;
        }
      });
    },
  },
  mounted() {
    this.arr = this.$store.state.commdata.arr;
    this.id = this.$route.params.id;
  },
  filters:{
    updata(val){
      if(val.length>70){
        return val.substr(0,70)+'...'
      }else{
        return val
      }
    },
    upsj(val){
      if(val.length>9){
        return val.substr(5,5)
      }else{
        return val
      }
    }
  },
  methods: {
    fun(){
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.head {
  position: sticky;
  z-index: 10;
  top: 0;
  width: 100%;
  background: rgb(255, 255, 255);
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.17rem;
}
.head img {
  width: 0.24rem;
  height: 0.24rem;
  float: left;
  margin-top: 0.1rem;
  margin-left: 0.1rem;
}
.head span {
  margin-left: 1.2rem;
  float: left;
  font-size: 0.17rem;
}
.user {
  position: sticky;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0.08rem 0.16rem;
  background-color: #fff;
  border-top: 1px solid #d8d8d8;
}
.user-img {
  width: 0.36rem;
  height: 0.36rem;
  margin-right: 0.06rem;
  border: 1px solid #eaeaea;
  border-radius: 50%;
}
.user-img img {
  width: 0.36rem;
  height: 0.36rem;
}
.user-text {
  height: 0.36rem;
  width: 2.25rem;
  padding-left: 0.03rem;
}
.user-text h5 {
  font-size: 0.16rem;
  font-weight: 500;
}
.user-text p {
  font-size: 0.11rem;
  color: #999;
}
.user-btn {
  width: 0.75rem;
  height: 0.34rem;
  border-radius: 0.14rem;
  border: 1px solid #e1e1e1;
  line-height: 0.34rem;
  font-size: 0.14rem;
  text-align: center;
}
.my-swipe .van-swipe-item {
  height: 5rem;
  float: left;
  line-height: 150px;
}
.van-swipe-item img{
  width: 100%;
}
.poitag {
  background: rgb(255, 255, 255);
  padding: 12px 0px 16px 12px;
  display: flex;
  white-space: nowrap;
  margin-right: 63px;
}
.poitag .item,
.poitag .item2 {
  height: 0.2rem;
  border-radius: 14px;
  padding: 0px 8px 0px 2px;
  background: rgb(242, 243, 247);
  line-height: 0.2rem;
}
.poitag .item {
  margin-right: 0.1rem;
}
.poitag img {
  width: 0.16rem;
  height: 0.16rem;
  vertical-align: middle;
  margin-right: 0.06rem;
}
.poitag span {
  font-size: 0.12rem;
}
.container {
  margin: 0.12rem 0.16rem;
  display: flex;
  justify-content: space-between;
  height: 1.1rem;
  border-radius: 0.05rem;
  background-color: #fff;
  box-shadow: 0 1px 12px 0 rgb(154 191 219 / 28%);
  padding: 0.08rem 0.14rem 0.08rem 0.08rem;
}
.container img {
  width: 0.89rem;
  height: 0.89rem;
  border-radius: 0.05rem;
}
.container-wrap {
  width: calc(100% - 0.97rem);
}
.container-wrap h5 {
  font-size: 0.16rem;
}
.container-wrap p {
  font-size: 0.11rem;
  background-color: rgb(233, 100, 93);
  color: #fff;
  padding: 0.03rem;
  width: 1.4rem;
}
.container-wrap .title {
  margin-top: 0.22rem;
  font-size: 0.11rem;
  color: #666;
  background-color: #fff;
}
.container-wrap button {
  border: none;
  color: #fff;
  padding: 0.03rem 0.05rem;
  background-color: orange;
  float: right;
  border-radius: 0.03rem;
  margin-top: -0.3rem;
}
.content {
  padding: 0 0.12rem;
  background-color: #fff;
}
.content h2 {
  font-size: 0.2rem;
  font-weight: 200;
}
.content p {
  font-size: 0.17rem;
  line-height: 0.3rem;
  margin-bottom: 0.2rem;
}
.content .title {
  margin-top: 0.2rem;
  font-size: 12px;
  color: rgb(153, 153, 153);
}
.comment {
  margin-top: 0.1rem;
  padding: 0.1rem 0.12rem;
  font-size: 0.15rem;
  background-color: #fff;
}
.comment-list {
  height: 0.84rem;
  border-bottom: 1px solid #e5e5e5;
}
.comment-list img {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  float: left;
  margin-top: 0.1rem;
}
.comment-list .item-warp {
  float: left;
  margin-left: 0.1rem;
}
.comment-list .item-warp span {
  font-size: 0.13rem;
  color: #666;
}
.comment-list .item-warp p {
  font-size: 0.14rem;
  margin: 0.05rem 0;
}
</style>